<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob: https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://code.jquery.com https://unpkg.com https://d3js.org https://threejs.org https://cdn.plot.ly https://stackpath.bootstrapcdn.com https://maps.googleapis.com https://cdn.tailwindcss.com https://ajax.googleapis.com https://kit.fontawesome.com https://cdn.datatables.net https://maxcdn.bootstrapcdn.com https://code.highcharts.com https://tako-static-assets-production.s3.amazonaws.com https://www.youtube.com https://fonts.googleapis.com https://fonts.gstatic.com https://pfst.cf2.poecdn.net https://puc.poecdn.net https://i.imgur.com https://wikimedia.org https://*.icons8.com https://*.giphy.com https://picsum.photos https://images.unsplash.com; frame-src 'self' https://www.youtube.com https://trytako.com; child-src 'self'; manifest-src 'self'; worker-src 'self'; upgrade-insecure-requests; block-all-mixed-content;">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人事薪酬系统可视化大屏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }

        body {
            background-color: #041633;
            color: #fff;
            overflow-x: hidden;
            background-image: radial-gradient(circle at 50% 50%, rgba(9, 42, 99, 0.5) 0%, rgba(4, 22, 51, 0.7) 100%);
        }

        .container {
            width: 100%;
            min-height: 100vh;
            padding: 20px;
            display: flex;
            flex-direction: column;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding: 0 20px; /* Add some padding */
        }

        .filters select {
            background-color: rgba(4, 35, 84, 0.8);
            color: white;
            border: 1px solid #0a5299;
            padding: 5px 10px;
            border-radius: 4px;
            margin-right: 10px;
            outline: none;
        }

        .title {
            text-align: center;
            font-size: 28px;
            font-weight: bold;
            color: #fff;
            text-shadow: 0 0 10px rgba(0, 195, 255, 0.8);
            background: linear-gradient(90deg, rgba(0, 51, 153, 0), rgba(0, 153, 255, 0.5), rgba(0, 51, 153, 0));
            padding: 10px 0;
            /* width: 60%; */ /* Let it take space */
            flex-grow: 1; /* Allow title to grow */
            margin: 0 20px; /* Add margin */
            border-top: 1px solid rgba(0, 195, 255, 0.4);
            border-bottom: 1px solid rgba(0, 195, 255, 0.4);
        }

        .time {
            font-size: 20px;
            font-weight: bold;
            color: white;
            text-align: right;
            white-space: nowrap; /* Prevent time wrapping */
            /* Add date display */
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }
        .time .date {
            font-size: 12px;
            color: #89daff;
        }


        .dashboard {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr; /* Adjusted ratio */
            gap: 20px;
            flex: 1;
        }

        .panel {
            background-color: rgba(3, 28, 66, 0.6);
            border: 1px solid rgba(0, 102, 204, 0.5);
            border-radius: 5px;
            padding: 15px;
            position: relative;
            /* margin-bottom: 20px; */ /* Removed, handled by grid gap */
            box-shadow: 0 0 15px rgba(0, 174, 255, 0.2);
            display: flex; /* Make panels flex containers */
            flex-direction: column; /* Stack content vertically */
        }

        .panel-title {
            font-size: 16px;
            position: relative;
            padding-left: 15px;
            margin-bottom: 15px;
            color: #0ce0ff;
            flex-shrink: 0; /* Prevent title from shrinking */
        }

        .panel-title::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 5px;
            height: 20px;
            background: linear-gradient(to bottom, #00ccff, #0066cc);
        }

        .left-column, .right-column {
            display: flex;
            flex-direction: column;
            gap: 20px; /* Space between panels */
        }

        .center-column {
            display: flex;
            flex-direction: column;
            gap: 20px; /* Space between elements */
        }

        .salary-panels {
            display: flex;
            justify-content: space-between;
            /* margin-bottom: 20px; */ /* Removed */
            gap: 15px; /* Space between salary panels */
            flex-shrink: 0; /* Prevent shrinking */
        }

        .salary-panel {
            flex: 1;
            /* margin: 0 10px; */ /* Removed */
            background-color: rgba(3, 28, 66, 0.8);
            border: 1px solid rgba(0, 102, 204, 0.5);
            border-radius: 5px;
            padding: 15px;
            text-align: center;
            position: relative;
        }

        .salary-title {
            font-size: 14px;
            color: #89daff;
            margin-bottom: 10px;
        }

        .salary-amount {
            font-size: 22px;
            font-weight: bold;
            color: #00e1ff;
        }

        .salary-unit {
            font-size: 12px;
            color: #78cbff;
            display: block;
        }

        .salary-icon {
            position: absolute;
            right: 15px;
            top: 15px;
            font-size: 24px;
            color: rgba(0, 153, 255, 0.5);
            background: rgba(0, 30, 60, 0.5);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Staff Count Styles (Kept for first panel) */
        .staff-count {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 10px; /* Adjusted spacing */
        }
        .staff-item {
            display: flex;
            align-items: center;
            margin-right: 15px; /* Adjusted spacing */
            margin-bottom: 8px;
            flex-basis: calc(50% - 15px); /* Approx 2 items per row */
        }
         .staff-icon {
             width: 20px; /* Slightly smaller */
             height: 20px;
             background-color: rgba(0, 102, 204, 0.5);
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             margin-right: 5px;
             font-size: 12px; /* Added font size */
             font-weight: bold;
             color: #fff;
         }
         .staff-label {
             font-size: 13px; /* Adjusted */
             color: #89daff;
         }
         .staff-num {
             font-size: 15px; /* Adjusted */
             font-weight: bold;
             color: #00e1ff;
             margin: 0 5px;
         }
         .staff-unit {
             font-size: 11px; /* Adjusted */
             color: #78cbff;
         }

        /* Chart Container Placeholder (General) */
        .chart-container { /* Can remove if using direct IDs */
            width: 100%;
            flex-grow: 1; /* Allow chart containers to fill space */
            min-height: 150px; /* Ensure minimum height */
        }

        /* Age Stats Styles (Kept for structure) */
        .age-stats {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px; /* Spacing before chart */
            flex-shrink: 0;
        }
        .age-item {
            text-align: center;
            flex: 1;
        }
        .age-value {
            font-size: 22px;
            font-weight: bold;
            color: #00e1ff;
        }
        .age-label {
            font-size: 12px;
            color: #78cbff;
        }

        /* Map Container Styles */
        .map-container {
            width: 100%;
            /* height: 400px; */ /* Let it grow */
            flex-grow: 1; /* Allow map to fill vertical space */
            position: relative;
            overflow: hidden;
            border-radius: 5px;
            /* margin-bottom: 20px; */ /* Removed */
            border: 1px solid rgba(0, 102, 204, 0.5); /* Add border like panels */
            background-color: rgba(3, 28, 66, 0.6); /* Add background like panels */
             min-height: 300px; /* Ensure a minimum height */
        }

        .map {
            width: 100%;
            height: 100%;
            /* background-image: url(...); */ /* Image removed, just blue background */
            background-color: rgba(9, 42, 99, 0.3); /* Faint blue bg */
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .location-marker {
            position: absolute;
            width: 8px;
            height: 8px;
            background-color: #00e1ff;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 10px rgba(0, 225, 255, 0.8);
            cursor: pointer; /* Add pointer */
        }

        .location-marker::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: rgba(0, 225, 255, 0.3);
            animation: pulse 2s infinite;
        }

        .location-info {
            position: absolute;
            background-color: rgba(0, 20, 50, 0.9); /* Darker */
            border: 1px solid rgba(0, 153, 255, 0.7); /* Stronger border */
            border-radius: 4px;
            padding: 8px 12px; /* More padding */
            font-size: 12px;
            color: white;
            bottom: 15px; /* Position below marker */
            left: 50%;
            transform: translateX(-50%);
            white-space: pre; /* Use 'pre' for newlines */
            opacity: 0; /* Hidden by default */
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            pointer-events: none; /* Don't interfere with marker hover */
            z-index: 10;
        }

        .location-marker:hover .location-info {
            opacity: 1;
            visibility: visible;
        }

        /* No arrow needed for info box below marker */
        /* .location-info::after { ... } */ /* Removed arrow */

        /* Skill Details */
        .skill-details {
            display: flex;
            justify-content: space-around;
            margin-top: 10px;
            flex-shrink: 0;
        }

        .skill-detail {
            text-align: center;
            display: flex; /* Align items horizontally */
            align-items: center;
            font-size: 12px; /* Base size */
        }
        .skill-value {
             font-size: 12px; /* Adjusted */
             font-weight: bold;
             color: #00e1ff;
             margin-left: 5px;
        }
        .skill-text {
             font-size: 12px;
             color: #78cbff;
         }
         /* Color indicator for skill details */
         .skill-detail > div:first-child {
             display: inline-block;
             width: 10px;
             height: 10px;
             border-radius: 2px;
             margin-right: 5px;
         }
         /* Count next to percentage */
         .skill-detail .count {
             font-size: 10px;
             color: #78cbff;
             margin-left: 3px;
         }


        /* Responsive Adjustments */
        @media (max-width: 1200px) {
            .dashboard {
                grid-template-columns: 1fr 1fr; /* Adjust to 2 columns */
            }
            .center-column {
                grid-column: span 2; /* Center column spans both */
                order: -1; /* Move map and salary to top */
            }
            .left-column, .right-column {
                grid-row: 2; /* Move side panels below */
            }
            .title {
                font-size: 24px;
            }
        }

        @media (max-width: 768px) {
            .header {
                flex-direction: column;
                align-items: stretch; /* Stretch items full width */
                gap: 10px;
            }
            .filters, .time {
                display: flex;
                justify-content: space-between; /* Space out filters/time */
            }
            .time {
                 justify-content: flex-end;
            }
            .title {
                font-size: 20px;
                width: 100%;
                margin: 0;
                order: -1; /* Title first on mobile */
            }
            .dashboard {
                grid-template-columns: 1fr; /* Single column */
            }
            .center-column, .left-column, .right-column {
                grid-column: span 1; /* Reset span */
                grid-row: auto; /* Reset row */
                order: 0; /* Reset order */
            }
            .salary-panels {
                flex-direction: column;
            }
            .salary-panel {
                margin: 5px 0; /* Reduced margin */
            }
            .staff-item {
                 flex-basis: 100%; /* Stack staff items */
                 margin-right: 0;
            }
        }

        /* Animation */
        @keyframes pulse {
            0% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }
            100% {
                transform: translate(-50%, -50%) scale(3);
                opacity: 0;
            }
        }
    </style>
    <!-- Include ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="filters">
                <select id="department">
                    <option value="all">全部机构</option>
                    <!-- Add more options as needed -->
                </select>
                <select id="year">
                    <option value="2024">2024年</option>
                    <option value="2023">2023年</option>
                    <option value="2022">2022年</option>
                </select>
            </div>

            <div class="title">人事薪酬系统可视化大屏</div>

            <div class="time">
                <span id="current-time">--:--:--</span>
                <span class="date" id="current-date">---- -- -- 星期-</span>
            </div>
        </div>

        <div class="dashboard">
            <!-- Left Column -->
            <div class="left-column">
                <div class="panel">
                    <div class="panel-title">人员统计</div>
                    <!-- Keep original staff count display for this panel -->
                     <div class="staff-count">
                         <div class="staff-item">
                             <div class="staff-icon">在</div>
                             <div class="staff-label">在职人员</div>
                             <div class="staff-num">384</div>
                             <div class="staff-unit">个人</div>
                         </div>
                         <div class="staff-item">
                             <div class="staff-icon">岗</div> <!-- Example: Add different types -->
                             <div class="staff-label">在岗人员</div>
                             <div class="staff-num">370</div>
                             <div class="staff-unit">个人</div>
                         </div>
                     </div>
                     <div class="staff-count">
                         <div class="staff-item">
                             <div class="staff-icon">新</div>
                             <div class="staff-label">本月新入</div>
                             <div class="staff-num">5</div>
                             <div class="staff-unit">个人</div>
                         </div>
                         <div class="staff-item">
                             <div class="staff-icon">离</div>
                             <div class="staff-label">本月离职</div>
                             <div class="staff-num">2</div>
                             <div class="staff-unit">个人</div>
                         </div>
                     </div>
                     <div class="staff-count">
                        <div class="staff-item">
                            <div class="staff-icon">编</div>
                            <div class="staff-label">编制内</div>
                            <div class="staff-num">300</div>
                            <div class="staff-unit">个人</div>
                        </div>
                        <div class="staff-item">
                            <div class="staff-icon">外</div>
                            <div class="staff-label">编制外</div>
                            <div class="staff-num">84</div>
                            <div class="staff-unit">个人</div>
                        </div>
                    </div>
                    <!-- Add more staff items or rows if needed -->
                </div>

                <div class="panel">
                    <div class="panel-title">各部门人员统计</div>
                    <!-- ECharts container -->
                    <div id="deptStaffChart" style="width: 100%; height: 280px; flex-grow: 1;"></div>
                </div>

                <div class="panel">
                    <div class="panel-title">能力结构统计</div> <!-- Renamed from '培训' to match visual better -->
                    <!-- ECharts container -->
                    <div id="skillChart" style="width: 100%; height: 180px;"></div>
                    <!-- Skill details below chart -->
                    <div class="skill-details">
                        <div class="skill-detail">
                            <div></div> <!-- Color Indicator -->
                            <span class="skill-text">本科以下</span>
                            <span class="skill-value">--%</span>
                            <span class="count">(--)</span>
                        </div>
                        <div class="skill-detail">
                           <div></div> <!-- Color Indicator -->
                            <span class="skill-text">本科</span>
                            <span class="skill-value">--%</span>
                            <span class="count">(--)</span>
                        </div>
                        <div class="skill-detail">
                            <div></div> <!-- Color Indicator -->
                            <span class="skill-text">本科以上</span>
                            <span class="skill-value">--%</span>
                             <span class="count">(--)</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Center Column -->
            <div class="center-column">
                <div class="salary-panels">
                    <div class="salary-panel">
                        <div class="salary-title">本月已发工资</div>
                        <div class="salary-amount">38.00</div>
                        <div class="salary-unit">万元</div>
                        <div class="salary-icon">月</div>
                    </div>
                    <div class="salary-panel">
                        <div class="salary-title">本季已发工资</div>
                        <div class="salary-amount">138.00</div>
                        <div class="salary-unit">万元</div>
                        <div class="salary-icon">季</div>
                    </div>
                    <div class="salary-panel">
                        <div class="salary-title">本年已发工资</div>
                        <div class="salary-amount">688.00</div> <!-- Corrected value from image -->
                        <div class="salary-unit">万元</div>
                        <div class="salary-icon">年</div>
                    </div>
                </div>

                <div class="map-container">
                    <!-- ECharts Map or Static Map Background -->
                    <div class="map" id="staff-map">
                        <!-- Markers will be added via JavaScript -->
                    </div>
                </div>
            </div>

            <!-- Right Column -->
            <div class="right-column">
                <div class="panel">
                    <div class="panel-title">部门人力成本构成</div> <!-- Changed title based on image data -->
                    <!-- ECharts container -->
                     <div id="deptCostChart" style="width: 100%; height: 280px; flex-grow: 1;"></div>
                </div>

                <div class="panel">
                    <div class="panel-title">年龄、司龄、工龄结构</div>
                    <div class="age-stats">
                        <div class="age-item">
                            <div class="age-value">37.5</div>
                            <div class="age-label">平均年龄(岁)</div> <!-- Corrected label -->
                        </div>
                        <div class="age-item">
                            <div class="age-value">5.9</div>
                            <div class="age-label">平均司龄(年)</div>
                        </div>
                        <div class="age-item">
                            <div class="age-value">12.65</div>
                            <div class="age-label">平均工龄(年)</div>
                        </div>
                    </div>
                    <!-- ECharts container -->
                    <div id="ageChart" style="width: 100%; height: 150px; flex-grow: 1;"></div>
                </div>

                <div class="panel">
                    <div class="panel-title">性别统计</div>
                    <!-- ECharts container -->
                    <div id="genderChart" style="width: 100%; height: 150px; flex-grow: 1;"></div>
                     <!-- Optional: Keep progress bar if desired, or remove if pie chart is sufficient -->
                     <!-- <div class="progress-bar">
                        <div class="progress-fill" style="width: 33%"></div>
                    </div> -->
                </div>
            </div>
        </div>
    </div>

    <script>
        // Wrap ECharts initialization in DOMContentLoaded to ensure elements exist
        document.addEventListener('DOMContentLoaded', function() {

            // --- Chart Colors (adjust as needed) ---
            const primaryColor = '#00e1ff';
            const secondaryColor = '#0066cc';
            const accentColor = '#ffc300'; // Example accent
            const femaleColor = '#ff71a7'; // Pinkish color from image
            const maleColor = primaryColor; // Use primary blue for male
            const textColor = '#89daff';
            const axisLineColor = 'rgba(0, 153, 255, 0.5)';
            const splitLineColor = 'rgba(0, 153, 255, 0.2)';
            const bgColor = 'rgba(0, 51, 102, 0.5)';
            const skillColorBelow = '#6c757d'; // Grayish for 本科以下
            const skillColorBach = primaryColor; // Blue for 本科
            const skillColorAbove = '#ffc107'; // Yellowish for 本科以上

            // --- Department Names (Consistent Order) ---
            // !! IMPORTANT: Ensure this order matches data arrays for both charts !!
            const deptNames = [
                '党群监察部', '科技教育中心', '发展艺术中心', '视觉艺术中心', // Corrected based on right chart image
                '校区管理部', '实践教育中心', '财务部', '人力资源部',
                '数字管理部', '办公室'
            ];

            // --- 1. 各部门人员统计 (Left Bar Chart) ---
            var deptStaffChartDom = document.getElementById('deptStaffChart');
            if (deptStaffChartDom) {
                var deptStaffChart = echarts.init(deptStaffChartDom);
                // Data based on left chart image hints (adjust if needed)
                const deptStaffData = [15, 10, 25, 20, 30, 18, 8, 22, 12, 5]; // Example values roughly matching bar lengths

                var deptStaffOption = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { type: 'shadow' },
                        backgroundColor: 'rgba(3, 28, 66, 0.9)',
                        borderColor: axisLineColor,
                        textStyle: { color: '#fff' },
                        formatter: '{b}: {c}人' // Simple tooltip
                    },
                    grid: {
                        left: '3%',
                        right: '10%', // Make space for labels
                        bottom: '3%',
                        top: '5%', // Add a little top margin
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        axisLabel: { show: false },
                        axisLine: { show: false },
                        axisTick: { show: false },
                        splitLine: { show: false }
                    },
                    yAxis: {
                        type: 'category',
                        data: deptNames, // Use consistent department names
                        axisLabel: { color: textColor, fontSize: 12 },
                        axisLine: { show: true, lineStyle: { color: axisLineColor } },
                        axisTick: { show: false },
                        inverse: true // Bars start from top like original
                    },
                    series: [{
                        name: '人员数量',
                        type: 'bar',
                        barWidth: '50%', // Adjust bar thickness
                        data: deptStaffData,
                        itemStyle: {
                             color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [ // Gradient from right to left
                                 { offset: 0, color: primaryColor },
                                 { offset: 1, color: secondaryColor }
                             ]),
                             borderRadius: [0, 3, 3, 0] // Rounded corners on the right
                        },
                        label: {
                            show: true,
                            position: 'right',
                            color: primaryColor,
                            fontSize: 11,
                            formatter: '{c}' // Display value
                        }
                    }]
                };
                deptStaffChart.setOption(deptStaffOption);
                window.addEventListener('resize', deptStaffChart.resize);
            }


            // --- 2. 能力结构统计 (Donut Chart) ---
            var skillChartDom = document.getElementById('skillChart');
            if (skillChartDom) {
                var skillChart = echarts.init(skillChartDom);
                // Data from image: 54.82% (125), 本科 (?), 29.82% (68)
                // Calculate 本科 based on total (assuming 384 total staff?)
                // OR use the provided counts: 125, 68. Let's assume total is 125 + 68 + X = 384 => X = 191 (本科)? This seems high.
                // Let's stick to the counts provided: 125 (Below), 68 (Above). Let's assume the remaining are 本科: 384 - 125 - 68 = 191.
                // OR let's assume the total is implicitly defined by 125 + X + 68, and 54.82% is 125. Total = 125 / 0.5482 = ~228
                // Let's use Total = 228 based on 54.82% being 125. Then 本科 = 228 - 125 - 68 = 35.
                const skillData = [
                     { value: 125, name: '本科以下' },
                     { value: 35, name: '本科' }, // Calculated based on 228 total
                     { value: 68, name: '本科以上' }
                ];
                const totalSkills = skillData.reduce((sum, item) => sum + item.value, 0);
                const largestSkill = skillData.reduce((max, item) => item.value > max.value ? item : max, skillData[0]);
                const largestPercentage = ((largestSkill.value / totalSkills) * 100).toFixed(2);


                var skillOption = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c}人 ({d}%)',
                        backgroundColor: 'rgba(3, 28, 66, 0.9)',
                        borderColor: axisLineColor,
                        textStyle: { color: '#fff' }
                    },
                    graphic: [ // Use graphic for center text like original
                        {
                            type: 'text',
                            left: 'center',
                            top: '38%', // Adjust vertical position
                            style: {
                                text: largestPercentage + '%', // Display largest percentage
                                textAlign: 'center',
                                fill: skillColorBelow, // Color matching the largest slice (本科以下)
                                fontSize: 22,
                                fontWeight: 'bold'
                            }
                        },
                        {
                            type: 'text',
                            left: 'center',
                            top: '55%', // Adjust vertical position
                            style: {
                                text: largestSkill.name, // Display label for largest percentage
                                textAlign: 'center',
                                fill: textColor,
                                fontSize: 12
                            }
                        }
                    ],
                    series: [{
                        name: '学历构成',
                        type: 'pie',
                        radius: ['65%', '85%'], // Make it a donut chart
                        center: ['50%', '50%'],
                        avoidLabelOverlap: false,
                        label: { show: false }, // Hide default labels on slices
                        labelLine: { show: false },
                        emphasis: {
                            label: { show: false }, // Keep hidden on hover too
                             scaleSize: 5 // Slight scale effect on hover
                        },
                        data: skillData,
                        itemStyle: {
                             // Assign colors - make sure order matches data
                             color: [skillColorBelow, skillColorBach, skillColorAbove],
                             borderWidth: 3,
                             borderColor: '#041633' // Match background
                        }
                    }]
                };
                skillChart.setOption(skillOption);

                 // Update the separate skill details text based on data
                 const skillDetailsContainer = document.querySelector('.skill-details');
                 if (skillDetailsContainer) {
                     const details = skillDetailsContainer.querySelectorAll('.skill-detail');
                     details.forEach((detail, index) => {
                         if (skillData[index]) {
                             const percentage = ((skillData[index].value / totalSkills) * 100).toFixed(2);
                             detail.querySelector('.skill-value').textContent = percentage + '%';
                             detail.querySelector('.count').textContent = `(${skillData[index].value})`;
                             // Update color indicator
                             const colorIndicator = detail.querySelector('div:first-child');
                             if (colorIndicator && skillOption.series[0].itemStyle.color[index]) {
                                 colorIndicator.style.backgroundColor = skillOption.series[0].itemStyle.color[index];
                             }
                         }
                     });
                 }

                window.addEventListener('resize', skillChart.resize);
            }


            // --- 3. 部门人力成本 (Right Bar Chart) ---
            var deptCostChartDom = document.getElementById('deptCostChart');
            if (deptCostChartDom) {
                var deptCostChart = echarts.init(deptCostChartDom);
                 // Data based on right chart image percentages and values
                const deptCostDataPercentages = [15.35, 15.35, 15.35, 15.35, 15.35, 15.35, 15.35, 15.35, 15.35, 15.35]; // From image
                const deptCostDataValues = [35, 35, 35, 35, 35, 35, 35, 35, 35, 35]; // From image (万)

                var deptCostOption = {
                     tooltip: {
                         trigger: 'axis',
                         axisPointer: { type: 'shadow' },
                         formatter: function (params) {
                            const index = params[0].dataIndex;
                            const name = deptNames[index];
                            const value = deptCostDataValues[index] || 0;
                            const percentage = deptCostDataPercentages[index] || 0;
                            return `${name}<br/>${params[0].marker}成本: ${value}万 (${percentage}%)`;
                         },
                         backgroundColor: 'rgba(3, 28, 66, 0.9)',
                         borderColor: axisLineColor,
                         textStyle: { color: '#fff' }
                     },
                     grid: {
                        left: '3%',
                        right: '20%', // More space for value labels
                        bottom: '3%',
                        top: '5%',
                        containLabel: true
                     },
                     xAxis: {
                         type: 'value',
                         axisLabel: { show: false },
                         axisLine: { show: false },
                         axisTick: { show: false },
                         splitLine: { show: false }
                     },
                     yAxis: {
                         type: 'category',
                         data: deptNames, // Use consistent department names
                         axisLabel: { color: textColor, fontSize: 12 },
                         axisLine: { show: true, lineStyle: { color: axisLineColor } },
                         axisTick: { show: false },
                         inverse: true // Bars start from top
                     },
                     series: [{
                         name: '成本占比', // This name isn't directly shown but good for context
                         type: 'bar',
                         barWidth: '50%',
                         // Data should correspond to the percentages for bar length
                         data: deptCostDataPercentages,
                         itemStyle: {
                             color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                 { offset: 0, color: primaryColor },
                                 { offset: 1, color: secondaryColor }
                             ]),
                             borderRadius: [0, 3, 3, 0]
                         },
                         label: {
                             show: true,
                             position: 'right',
                             color: primaryColor,
                             fontSize: 11,
                              // Show percentage and value from image
                             formatter: function(params) {
                                  // Get the corresponding value based on index
                                  const value = deptCostDataValues[params.dataIndex] || 0;
                                  return `${params.value}%   ${value}万`; // Display Percentage and Value
                             }
                         }
                     }]
                 };
                deptCostChart.setOption(deptCostOption);
                window.addEventListener('resize', deptCostChart.resize);
            }


            // --- 4. 年龄结构 (Vertical Bar Chart) ---
            var ageChartDom = document.getElementById('ageChart');
            if (ageChartDom) {
                var ageChart = echarts.init(ageChartDom);
                // Corrected labels based on image
                const ageCategories = ['25岁以下', '26-30岁', '31-35岁', '36-40岁', '41-45岁', '46-50岁', '50岁以上'];
                 // Example data roughly matching bar heights in image
                const ageData = [20, 45, 65, 80, 50, 30, 15];

                var ageOption = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { type: 'shadow' },
                        backgroundColor: 'rgba(3, 28, 66, 0.9)',
                        borderColor: axisLineColor,
                        textStyle: { color: '#fff' },
                        formatter: '{b}: {c}人'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '10%', // More space for labels
                        top: '15%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: ageCategories,
                        axisLabel: { color: textColor, fontSize: 10, interval: 0 }, // Show all labels
                        axisLine: { lineStyle: { color: axisLineColor } },
                        axisTick: { alignWithLabel: true, lineStyle: { color: axisLineColor} }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: { show: false },
                        axisLine: { show: false },
                        axisTick: { show: false },
                        splitLine: { show: true, lineStyle: { color: splitLineColor, type: 'dashed' } }
                    },
                    series: [{
                        name: '人数',
                        type: 'bar',
                        barWidth: '45%', // Adjust bar width
                        data: ageData,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // Gradient top to bottom
                                { offset: 0, color: primaryColor },
                                { offset: 1, color: secondaryColor }
                            ]),
                            borderRadius: [3, 3, 0, 0] // Rounded top corners
                        }
                        // label: { show: true, position: 'top', color: primaryColor, fontSize: 10 } // Optional: Show value on top
                    }]
                };
                ageChart.setOption(ageOption);
                window.addEventListener('resize', ageChart.resize);
            }


            // --- 5. 性别统计 (Pie Chart) ---
            var genderChartDom = document.getElementById('genderChart');
            if (genderChartDom) {
                var genderChart = echarts.init(genderChartDom);
                const totalStaff = 384; // From panel 1
                const malePercent = 33;
                const femalePercent = 67;
                const maleCount = Math.round(totalStaff * (malePercent / 100));
                const femaleCount = totalStaff - maleCount; // Ensure total adds up

                var genderOption = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c}人 ({d}%)',
                         backgroundColor: 'rgba(3, 28, 66, 0.9)',
                         borderColor: axisLineColor,
                         textStyle: { color: '#fff' }
                    },
                     // Use graphic elements to recreate the centered percentage/icons
                     graphic: [
                        { // Male Icon/Percent
                            type: 'text',
                            left: '25%', // Position left part
                            top: '30%',
                            style: { text: '♂', fill: maleColor, fontSize: 35, fontWeight: 'bold', textAlign: 'center' }
                        },
                         {
                            type: 'text',
                            left: '25%',
                            top: '55%',
                            style: { text: malePercent + '%', fill: maleColor, fontSize: 20, fontWeight: 'bold', textAlign: 'center' }
                        },
                        {
                            type: 'text',
                            left: '25%',
                            top: '75%',
                            style: { text: '男性职员', fill: textColor, fontSize: 12, textAlign: 'center' }
                        },
                        { // Female Icon/Percent
                            type: 'text',
                            right: '25%', // Position right part
                            top: '30%',
                            style: { text: '♀', fill: femaleColor, fontSize: 35, fontWeight: 'bold', textAlign: 'center' }
                        },
                         {
                            type: 'text',
                            right: '25%',
                            top: '55%',
                            style: { text: femalePercent + '%', fill: femaleColor, fontSize: 20, fontWeight: 'bold', textAlign: 'center' }
                        },
                        {
                            type: 'text',
                            right: '25%',
                            top: '75%',
                            style: { text: '女性职员', fill: textColor, fontSize: 12, textAlign: 'center' }
                        },
                    ],
                    series: [
                         // Add a simple invisible pie series just for the tooltip functionality if needed,
                         // otherwise the graphic elements handle the display.
                         // If you want hover effects on the icons/text, it gets more complex.
                         // Let's try without a visible pie for simplicity, relying on graphic.
                         // {
                         //    name: '性别分布', type: 'pie', radius: '1%', center: ['-50%', '-50%'], // Hide it
                         //    data: [ { value: maleCount, name: '男性职员' }, { value: femaleCount, name: '女性职员' } ]
                         // }
                         // Alternative: Small pie chart in the middle?
                         {
                            name: '性别分布',
                            type: 'pie',
                            radius: ['50%', '65%'],
                            center: ['50%', '50%'],
                            avoidLabelOverlap: false,
                            label: { show: false }, // Hide labels on chart itself
                            labelLine: { show: false },
                            emphasis: { scale: false }, // Disable hover effect on chart
                            data: [
                                { value: maleCount, name: '男性职员' },
                                { value: femaleCount, name: '女性职员' }
                            ],
                             itemStyle: {
                                 color: function(params) {
                                     return params.name === '男性职员' ? maleColor : femaleColor;
                                 },
                                 borderWidth: 2,
                                 borderColor: '#041633'
                             },
                             silent: true // Make the pie chart non-interactive if graphic elements are primary display
                         }
                    ]
                };
                genderChart.setOption(genderOption);
                window.addEventListener('resize', genderChart.resize);
            }

        }); // End DOMContentLoaded

        // --- Update Time and Date ---
        function updateTime() {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()];

            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');

            const timeEl = document.getElementById('current-time');
            const dateEl = document.getElementById('current-date');

            if (timeEl) {
                 timeEl.innerText = `${hours}:${minutes}:${seconds}`;
            }
            if (dateEl) {
                dateEl.innerText = `${year}-${month}-${day} ${week}`; // Format as in image
            }
        }
        updateTime(); // Initial call
        setInterval(updateTime, 1000); // Update every second

        // --- Map Marker Logic ---
        const staffMap = document.getElementById('staff-map');
        if (staffMap) {
            // Data based on image annotations
            const locations = [
                { name: '锦城公园校区', count: 35, x: 75, y: 35 },
                { name: '芳草校区', count: 24, x: 75, y: 42 },    // Estimated position
                { name: '九里堤校区', count: 12, x: 75, y: 49 },
                { name: '高新文化中心校区', count: 10, x: 70, y: 58 },
                { name: '简阳校区', count: 8, x: 88, y: 75 }    // Adjusted X pos slightly right
            ];

            locations.forEach(location => {
                const marker = document.createElement('div');
                marker.className = 'location-marker';
                marker.style.top = `${location.y}%`;
                marker.style.left = `${location.x}%`;

                const info = document.createElement('div');
                info.className = 'location-info';
                // Corrected label text based on image: "校区名称 \n 人力成本: 数字"
                info.textContent = `${location.name}\n人力成本:${location.count}`; // Use \n for newline

                marker.appendChild(info);
                staffMap.appendChild(marker);
            });
        }

    </script>

</body>
</html>